<template>
  <ul class="order-product-buy">
    <div
      class="product-item"
    >
      <div class="image">
        <img v-lazy="image" v-if="image.length > 0" />
      </div>
      <div class="desc">
        <p class="title two-lines">{{ product.title }}</p>
        <p class="sku" v-if="sku.length > 0">
          <span v-for="(o, i) in sku" :key="i" class="sku-value">
            {{ o }}
          </span>
        </p>
        <p class="quantity">数量 <span>x {{ product.quantity }}</span></p>
        <p class="price"><span v-html="price"></span></p>
      </div>
    </div>
  </ul>
</template>

<script>
export default {
  name: 'OrderProductBuy',
  props: ['product'],
  computed: {
    image() {
      let url = ''
      if (this.product.sku && this.product.sku.image && this.product.sku.image.thumbnail_path) {
        url = this.product.sku.image.thumbnail_path
      } else if (this.product.mainImage && this.product.mainImage.thumbnail_path) {
        url = this.product.mainImage.thumbnail_path
      }
      return url
    },
    price() {
      // let price = +this.product.price * this.product.quantity
      // 解决小数位数
      let price = +Number.parseFloat(this.product.price).toFixed(2)
      let text = `￥${price}`
      console.log(this.product.price)
      if (this.product.sku) {
        // price = +this.product.sku.price * this.product.quantity
        price = +this.product.sku.price
        text = `￥${price}`
      }
      if (this.product.scoreCost) {
        // text = `￥${+this.product.scoreCost.total * this.product.quantity} + ${+price}积分`
        // text = `￥${+this.product.scoreCost.total} + ${+price}积分`
        text = `￥${+this.product.scoreCost.total}元全国包邮快递费`
      }
      return text
    },
    sku() {
      let list = []
      if (this.product.selected_sku_text) {
        list = this.product.selected_sku_text
      }
      return list
    }
  }
}
</script>

<style scoped lang="stylus">
.order-product-buy
  margin 10px
  padding 10px
  background white
  border-radius 10px
  .product-item
    display flex
    .image
      width 100px
    .desc
      flex 1
      padding-left 10px
      text-align left
      p
        line-height 20px
        span
          color red
        &.title
          font-weight 700
          line-height 16px
        &.price
          span
            font-weight 700
            font-size 14px
        &.sku
          min-height 35px
          padding-top 5px
          .sku-value
            color $main_color
            //background #eee
            //margin-right 10px
            //padding 2.5px 10px
            //border-radius 5px

</style>
